<template>
  <div style="position: relative">
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
    <a-form-item style="width: 50%;padding-right:15px" label="对应上级" >
      {{formState.parentName}}

    </a-form-item>
      <a-form-item name="type" style="width: 50%;padding-left:15px" label="单位类型" >
      <a-radio-group :options="DWoptions" v-model:value="formState.type" />

    </a-form-item>
      <a-form-item style="width: 50%;padding-right:15px" ref="name" label="科室名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入科室名称" />
      </a-form-item>
      
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="code"
        label="科室编码"
        name="code"
      >
        <a-input
          v-model:value="formState.code"
          placeholder="请输入科室编码"
        />
      </a-form-item>
     <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="mobile"
        label="科室电话"
        name="mobile"
      >
        <a-input
          v-model:value="formState.mobile"
          placeholder="请输入科室电话"
        />
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="userStaffName"
        label="科室负责人"
        name="userStaffName"
      >
        <a-input
        style="width:100%"
          v-model:value="formState.userStaffName"
          placeholder="请输入科室负责人"
        />
      </a-form-item>
       <a-form-item
        style="width: 100%"
        ref="remark"
        label="备注"
        name="remark"
      >
      <a-textarea placeholder="请输入备注" v-model:value="formState.remark" showCount :maxlength="120" />
      </a-form-item>
    </a-form>

   
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import * as sysUserAdminApi from "@/api/userAdmin.js";
import { message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
import * as settingApi from "@/api/setting1";
import * as hospitalDepart from "@/api/hospitalDepart.js";
const validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入科室名称"));
      } else if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("科室名称不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };
    const validateCode = (rule, value, callback) => {
      {
        if (!value) {
          callback(new Error("请输入科室编码"));
        } else if (value.length > 22) {
          callback(new Error("科室编码长度小于22位"));
        } else {
          callback();
        }
      }
    };
    const validateUserStaffName = (rule, value, callback) => {
      if (
        value &&
        !/^[A-Za-z]{1,50}$|^[\u4e00-\u9fa5A-Za-z]{1,25}$/.test(value)
      ) {
        callback(new Error("科室负责人不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };
let validatePhone = async (rule, value) => {
  // var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
  var reg = /^(([0-9]{3,4}-)?[0-9]{7,8}|(1[3456789]\d{9}))$/
  if (value == "") {
    return Promise.reject("请输入科室电话");
  } else if (!reg.test(value)) {
    return Promise.reject("请输入正确电话");
  } else {
    return Promise.resolve();
  }
};
const DWoptions = [
  {
    label: '科室',
    value: 0,
  },
  {
    label: '分院',
    value: 1,
  }
]
const rules = {
  name: [
    {
      required: true,
       validator:validateName,
      trigger: "blur",
    },
  ],

  code:[{
  required: true,
  validator:validateCode,
      trigger: "blur",
  }],
  
  mobile: [
    {
      required: true,
      validator: validatePhone,
      trigger: "blur",
    },
  ],
userStaffName:[
    {
      required: true,
      validator: validateUserStaffName,
      trigger: "blur",
    },
  ],
  
  
};

export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      name: "", //名称
      code: "", //编码
      id:'',
      type:0,
      remark:'',
      mobile:'',
      userStaffName:'',
      parentId:'',
      parentName:''
    });
    const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {})
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
         hospitalDepart
            .hospitalDepartSave(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      if (props.handleType == "add") {
        formState.id = ''
        formState.parentId = props.handleRow.parentId
        console.log(90)
        formState.parentName = props.handleRow.parentName
        console.log( props.handleRow)
        return false;
      }
      formState.name = props.handleRow.name
       formState.parentId = props.handleRow.parentId
      formState.code = props.handleRow.code
      formState.id = props.handleRow.id
      formState.mobile = props.handleRow.mobile
      formState.userStaffName = props.handleRow.userStaffName 
      formState.type = props.handleRow.type 
      formState.parentName = props.handleRow.parentName 
      formState.remark = props.handleRow.remark 
      formState.userStaffId = props.handleRow.userStaffId 
     
    });

   
    return {
      formRef,
      DWoptions,
      handleType,
      userInfo,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      resetForm,
    };
  },
});
</script>
<style lang="scss">

</style>